Linux Nginx部署前后端分离项目(Vue+Springboot) |
您所在的位置：网站首页 › springboot vue前后端分离项目部署 › Linux Nginx部署前后端分离项目(Vue+Springboot) |
Linux Nginx部署前后端分离项目(Vue+Springboot)
|
Linux Nginx部署前后端分离的Java Web项目(Vue+Springboot)
系统(CentOS 8)环境准备工作： - Java JDK的安装和配置(Java 8) - Nginx的安装与配置 - MySQL的安装与配置、项目数据库的建立 测试找的一个项目demo地址：https://gitee.com/xqnode/springboot-vue-demo 一、项目分析部署到Linux服务器之前需要明确该项目的运作模式。这里选取的前后端分离项目基于Vue+Springboot开发，前端与后端所有交互请求的url都是以/api开头，以区分其他请求的url。前端端口为9876，后端端口为9090，在前端项目打包之前，项目通过前端的vue.config.js文件进行url重写暂时解决了跨域(主要是跨端口)问题，如下： // 跨域配置 module.exports = { devServer: { //记住，别写错了devServer port: 9876, //设置本地默认端口 proxy: { //设置代理，必须填 '/api': { //设置拦截器 拦截器格式=>斜杠+拦截器名字，名字可以自己定 target: 'http://localhost:9090', //代理的目标地址 changeOrigin: true, //是否设置同源，输入是的 pathRewrite: { //路径重写 '/api': '' //选择忽略拦截器里面的单词 } } } } }开发环境下(前端DevServer)没有问题。当通过npm run build执行前端打包脚本形成一个前端项目(dist目录)，这个配置失去其作用，需要通过Nginx的配置重写url来解决跨端口问题。 二、项目准备将前端项目打包形成dist目录，归档成.tar文件，传入Linux虚拟机再还原，移动到/usr/local/nginx/html目录下。将后端项目打成jar包(包括项目及其依赖在内的一系列jar包)，通过相同方法移动到/usr/src目录下。这里的目录并不要求一定是这两个，后期配置可以随之改动。重命名两个项目为vue、vuedemo方便查找。 
三、Nginx配置
通过vim /usr/local/nginx/conf/nginx.conf编辑Web服务器Nginx的配置文件进行配置。主要分为以下两部分配置： 1、前端资源请求 当访问http://localhost:9876/时需要出现项目的主界面，即打包后的index.html。找到http {…}节点，编辑server {…}节点以及当中的location / {…}节点如下： server { listen 9876; # 监听前端的端口 server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { # root 指定前端资源的根目录 root html/vue; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } #...省略一些被注释掉的配置 location /nginx_status { stub_status on; access_log off; } }重启nginx或者通过nginx -s reload命令使修改后的配置生效。 2、前后端跨端口通信问题的解决。 没有了上面关于跨域的配置，前端所有与后端通信发出的请求都是以http://localhost:9876/开头，因此出现跨域问题。 后端基于Springboot(内嵌tomcat)因此无需另起tomcat容器，可以直接通过java -jar xxxx.jar(项目本身形成的那个jar包)运行起来。所有的前后端通信请求的url都是http://localhost:9876/api/xxxxxx，因此可以在Nginx中配置处理/api为前缀的路径，类似于于拦截器。 可以先在http节点中(server节点外)添加上游服务器upstream节点，这个节点一般用于反向代理，这里在upstream节点中只添加一个server表示只代理一个服务器(tomcat-1及其9090端口)，之后如果想反向代理多个服务器部署的同一个后端，可以往同一个upstream节点中添加多个不同的server地址(如下面tomcatserver节点的tomcat-2。weight是轮询的权重)，当然通过添加不同的upstream节点还可以实现代理不同的后端(个人见解)。 # reverse proxy upstream tomcatserver { server localhost:9090 weight=10; # tomcat-1 # server localhost:9091 weight=10; # tomcat-2 }在nginx.conf的server节点中添加location节点如下： # 所有与后端交互的url都携带api作为标志，因此可以监听api location /api { # 重写url，通过正则取url当中的/api/之后的部分与proxy_pass组成新的url rewrite ^/api/(.*)$ /$1 break; # proxy_pass 用于配置访问这个location时所用代理 proxy_pass http://tomcatserver; # proxy name of a group of upstream servers # proxy_pass http://localhost:9090$request_uri; =>有问题 proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-Ip $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; }有的人由于前后端分离时url约定的不同选择了下面那一行的proxy_pass配置，首先有问题的是这样写nginx会报localhost不认识的错产生502(查看nginx安装目录下的logs/error.log文件可看到nginx的错误日志，如图)，需要使用resolver。通过代理上游服务器upstream不会有这个麻烦。 
然后是$request_uri，这个变量指代的是proxy_pass之后的全部的url，如一个url为http://localhost:9876/api/user/233，proxy_pass用于替代localhost:9876这个部分，request_uri指的是/api/usr/233这一部分。因此没有去除/api的url是找不到后端对应controller的，nginx不会生成错误日志，服务器返回的是404的错误。 配置完成后，生效新的配置。进入后端jar包所在目录，启动后端程序 
然后在浏览器中访问http://localhost:9876/得到主界面 
登录后得到相应的界面如下。 
|
【本文地址】
今日新闻 |
推荐新闻 |